<template>
    <div class="admin-container">
        <div class="page-title">数据集列表</div>
        <div class="operate">
            <el-button type="primary" @click="showAddDatasetDialog">新增</el-button>
            <el-button type="danger" @click="deleteDataset">删除</el-button>
        </div>
        <!--列表-->
        <div class="list-wrap">
            <PageTable
                    ref="pageTable"
                    :table-data="tableData"
                    :loading="isLoading"
                    selection
                    :columns="columns"
                    @size-change="handlePageSizeChange"
                    :pagination="pagination">
                <el-table-column slot="operate" label="操作" width="120">
                    <template slot-scope="scope">
                        <el-button v-show="scope.row.status=='未下载'" type="primary" size="mini" plain
                                   @click="download(scope.row)">
                            下载
                        </el-button>
                    </template>
                </el-table-column>
            </PageTable>
        </div>
        <!--新增、修改弹框-->
        <el-dialog
                title="新增数据集"
                :visible.sync="addVisible"
                width="40%"
                :append-to-body="true"
                :close-on-click-modal="false">
            <div class="content">
                <el-form ref="smallScreenForm" label-width="100px">
                    <el-form-item label="数据集名称:" prop="name">
                        <el-input
                                clearable
                                v-model="dataset.name"
                                placeholder="中文，英文，数字及下划线，20字以内"
                                maxlength="20">
                        </el-input>
                    </el-form-item>
                    <el-form-item label="数据集版本:" prop="macAddress">
                        <el-input
                                clearable
                                v-model="dataset.version"
                                maxlength="50">
                        </el-input>
                    </el-form-item>

                    <el-form-item label="数据集描述:">
                        <el-input
                                type="textarea"
                                rows="4"
                                show-word-limit
                                v-model="dataset.desc"
                                clearable
                                placeholder="200字以内"
                                maxlength="200">
                        </el-input>
                    </el-form-item>
                </el-form>
            </div>
            <div slot="footer" class="dialog-footer">
                <el-button @click="addVisible = false">取 消</el-button>
                <el-button type="primary" @click="saveDataset">保存</el-button>
            </div>
        </el-dialog>

    </div>
</template>

<script>
    import PageTable from "../../components/table/PageTable";
    import {uuid, deleteItemById} from "../../utils/utils";

    export default {
        name: "DeviceList",
        components: {
            PageTable
        },
        data() {
            return {
                addVisible: false,
                isLoading: false,
                tableData: [{
                    id: uuid(),
                    name: "标贝数据集",
                    version: "2.1.0",
                    desc: "标贝数据集",
                    status: "已下载"
                }, {
                    id: uuid(),
                    name: " ImageNet",
                    version: "1.1.0",
                    desc: " ImageNet图像集",
                    status: "已下载"
                }, {
                    id: uuid(),
                    name: "PASCALVOC",
                    version: "0.2.2",
                    desc: "PASCALVOC图像集",
                    status: "未下载"
                }, {
                    id: uuid(),
                    name: "Labelme",
                    version: "3.1.0",
                    desc: "Labelme图像集",
                    status: "已下载"
                }, {
                    id: uuid(),
                    name: "Corel5k",
                    version: "3.2.0",
                    desc: "Corel5K图像集",
                    status: "未下载"
                }],
                columns: [{
                    slot: 'operate'
                }, {
                    prop: 'name',
                    label: '数据集名称',
                    align: 'center',
                    "show-overflow-tooltip": true
                }, {
                    prop: 'version',
                    label: '数据集版本',
                    align: 'center'
                }, {
                    prop: 'desc',
                    label: '数据集说明',
                    align: 'center',
                    "show-overflow-tooltip": true
                }, {
                    prop: 'status',
                    label: '下载状态',
                    align: 'center'
                }],

                pagination: {
                    currentPage: 1,
                    pageSize: 10,
                    totalCount: 0
                },

                dataset: {
                    id: uuid(),
                    name: "",
                    version: "",
                    desc: "",
                    status: "未下载"
                }
            }
        },
        mounted() {
            const list = localStorage.getItem("dataset_list");
            if (list) {
                this.tableData = JSON.parse(list);
            }
        },
        methods: {
            handlePageSizeChange(pageSize) {
                console.log(pageSize);
            },
            showAddDatasetDialog() {
                this.dataset = {
                    id: uuid(),
                    name: "",
                    version: "",
                    desc: "",
                    status: "未下载"
                }
                this.addVisible = true;
            },
            saveDataset() {
                this.tableData.push(this.dataset);
                this.addVisible = false;
            },
            deleteDataset() {
                let selectData = this.$refs.pageTable.getSelectedData();
                if (selectData && selectData.length > 0) {
                    this.$confirm('此操作将永久删除该数据集, 是否继续?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        selectData.forEach((item) => {
                            deleteItemById(this.tableData, item.id);
                        })
                        this.saveDatasetList();
                        this.$message.success("删除成功!");
                    }).catch(() => {
                    });
                } else {
                    this.$message.warning("请选择数据");
                }
            },
            download(row) {
                this.$confirm('此操作将下载该数据集, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    row.status = "已下载";
                    this.saveDatasetList()
                    this.$message.success("下载成功!");
                }).catch(() => {
                });
            },

            saveDatasetList() {
                localStorage.setItem("dataset_list", JSON.stringify(this.tableData))
            }
        }
    }
</script>